<template>
	<div class="f-tag-list" :style="{ left:$store.state.asideWidth }">
		 <el-tabs
		    v-model="activeTab"
		    type="card"
		    class="flex-1"
			@tab-remove="removeTab" style="min-width:100px;"
			@tab-change="changeTab"
		  >
		    <el-tab-pane
			:closable="item.path != '/'" 
		      v-for="item in tabList"
		      :key="item.path"
		      :label="item.title"
		      :name="item.path"
		    >
		      
		    </el-tab-pane>
		  </el-tabs>
		  
		  <span class="tag-btn">
			  <el-dropdown @command="handleClose">
			      <span class="el-dropdown-link">
			        <el-icon class="el-icon--right">
			          <arrow-down />
			        </el-icon>
			      </span>
			      <template #dropdown>
			        <el-dropdown-menu>
			          <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
			          <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
			        </el-dropdown-menu>
			      </template>
			    </el-dropdown>
		  </span>
		   
	</div>
	<div style="height: 44px;"></div>
</template>

<script setup>
	import { useTabList } from "~/composables/useTabList.js"
	const {
		activeTab,
		tabList,
		changeTab,
		removeTab,
		handleClose
		}= useTabList()
	
</script>

<style>
	.f-tag-list{
		@apply fixed bg-gray-100 flex items-center px-2;
		top: 64px;
		right: 0;
		height: 44px;
		z-index: 100;
		/* position: initial; */
	}
	.tag-btn{
		@apply bg-white rounded ml-auto flex items-center justify-center px-2;
		height: 32px;
	}
	:deep(.el-tabs_header){
		border: 0!important;
		@apply mb-0;
	}
	:deep(.el-tabs_nav){
		border: 0!important;
	}
	:deep(.el-tabs_item){
		border: 0!important;
		height: 32px;
		line-height: 32px;
		@apply bg-white mx-1 rounded;
	}
	
	:deep(.el-tabs_nav-next),:deep(.el-tabs_nav-prev){
		line-height: 32px;
		height: 32px;
	}
	:deep(.is-disabled){
		cursor: not-allowed;
		@apply text-gray-300;
	}
</style>